<script setup>
import {ref,onBeforeUnmount,watch,onMounted} from 'vue'
import {reqHasSpu,reqSkuList,reqRemoveSpu,reqSpuImageList} from '@/api/product/spu'
import useCategoryStore from '@/store/category'
import { ElMessage } from 'element-plus';
// import {reqAllTradeMark,reqSpuImageList,reqSpuHasSaleAttr,reqAllSaleAttr} from '@/api/product/spu'

import SpuForm from './spuForm.vue'  // 添加修改SPU的组件
import SkuForm from './skuForm.vue'  // 添加修改SKU的组件

let scene = ref(0)  // 控制分类选项的可用与禁用，并控制场景显示，0展示SPU，1添加修改SPU，2添加修改SKU
let show = ref(false)  // 控制sku列表对话框的显示与隐藏

let pageNo = ref(1)  // 当前页
let pageSize = ref(10)  // 每页多少条数据
let categoryStore = useCategoryStore()
let spuArr = ref([])  // 保存SPU列表
let total = ref(0)  // 保存SPU的总数
let skuArr = ref([])  // 保存sku列表


let spu = ref()  // 获取SpuForm组件实例
let sku = ref()  // 获取SkuForm组件实例
let detailsDialog = ref(false)  // 用来控制SPU详情的显示与隐藏
let spuInfo = ref({})  // 用来保存当前要显示的SPU详情信息
let imageArr = ref([]) // 用来保存spu的图片列表



// 获取SPU列表
const getHasSpu = (page=1)=>{
    // @current-change默认会传递当前页面进来
    reqHasSpu(pageNo.value,pageSize.value,categoryStore.c3Id).then(res=>{
        if(res.data.code==200){
            spuArr.value=res.data.data.spu_list
            total.value = res.data.data.total_num
        }else{
            ElMessage({
                type:'error',
                message:res.data.msg
            })
        }
        
    })
}
// 监控categoryStore.c3Id，三级分类id一旦变化，就发送请求获取数据
watch(()=>categoryStore.c3Id,()=>{
    if(categoryStore.c3Id){
        getHasSpu()
    }
})

onMounted(()=>{
    if(categoryStore.c3Id){
        getHasSpu()
    }
    
})

// 点击添加SPU按钮触发事件
const addSpu = ()=>{
    // 切换场景
    scene.value=1
    spu.value.initAddSpu(categoryStore.c3Id)

}
// 子组件触发父组件事件
const changeScene = ({flag,params})=>{
    // 子组件点击取消按钮，切换场景为，展示SPU列表
    scene.value=flag
    // 重新获取一下数据
    if(params=="add"){
        getHasSpu()
    }else{
        getHasSpu(pageNo.value)
    }
    
}

// 点击编辑按钮触发事件
const updateSpu = (row)=>{
    // 如果spu详情界面显示着的就关闭
    detailsDialog.value=false
    // 切换场景
    scene.value=1
    // 发送请求，获取数据
    spu.value.initHasSpuData(row)

}

// 点击添加SKU按钮时触发事件
const addSku = (row)=>{
    scene.value = 2
    // 调用子组件的方法，初始化数据
    sku.value.initSkuData(row)
}

// 点击查看sku按钮触发事件
const findSku = (row)=>{
    reqSkuList(row.id).then(res=>{
        if(res.data.code == 200){
            skuArr.value = res.data.data
            show.value=true
        }else{
            console.log('网络错误');
        }
        
    })
}

// 点击删除spu按钮触发事件
const deleteSpu = (row) => {
    reqRemoveSpu(row.id).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type:'success',
                message:'删除成功'
            })
            spuArr.value.length>1 ? getHasSpu() : (pageNo.value = pageNo.value-1,getHasSpu(pageNo.value))
        }else{
            ElMessage({
                type:'error',
                message:'删除失败，'+res.data.msg
            })
        }
    })
}

// 双击行显示spu详情
const showDetails = (row, column, event) => {
    detailsDialog.value=true
    spuInfo.value = row
    // 获取SPU图片列表
    reqSpuImageList(row.id).then(res => {
        if(res.data.code==200){
            imageArr.value = res.data.data
        }else{
            ElMessage({
                type:'error',
                message:'获取图片失败，'+res.data.msg
            })
        }
    })
}


// 路由组件销毁时触发函数，把仓库相关的数据清空
// onBeforeUnmount(()=>{
//     // 把仓库的数据清空重置
//     categoryStore.$reset()
// })

</script>

<template>
    <div class="box">
        <Category :scene="scene"></Category>
        <el-card style="margin: 10px 0;">
            <!-- 展示SPU数据组件 -->
            <div v-show="scene==0">
                <el-button v-has="`btn.Spu.add`" @click="addSpu" type="primary" icon="Plus" :disabled="categoryStore.c3Id?false:true">添加SPU</el-button>
                <el-table style="margin: 10px 0;" border :data="spuArr"  @row-dblclick="showDetails">
                    <el-table-column type="index" label="序号" width="80px"></el-table-column>
                    <el-table-column label="SUP名称(双击查看详情)" prop="name"></el-table-column>
                    <el-table-column label="SUP描述" prop="description" show-overflow-tooltip></el-table-column>
                    <el-table-column label="SUP操作" width="260px">
                        <template #="{row,$index}">
                            <el-button v-has="`btn.Spu.addSku`" type="primary" icon="Plus" size="small" title="添加sku" @click="addSku(row)"></el-button>
                            <el-button v-has="`btn.Spu.edit`" type="primary" icon="Edit" size="small" title="编辑spu" @click="updateSpu(row)"></el-button>
                            <el-button type="primary" icon="View" size="small" title="查看sku" @click="findSku(row)"></el-button>

                            <el-popconfirm :title="`你确定要删除${row.name}吗？`" width="200px" @confirm="deleteSpu(row)">
                                <template #reference>
                                    <el-button v-has="`btn.Spu.delete`" type="primary" icon="Delete" size="small" title="删除spu" @click=""></el-button>
                                </template>
                            </el-popconfirm>
                            
                        </template>
                    </el-table-column>

                </el-table>
                <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize"  :page-sizes="[10,20,30,50]" background 
                    layout="prev, pager, next, jumper, ->, total, sizes" :total="total" @current-change="getHasSpu"
                    />

                <!-- dialog对话框展示已有的sku数据 -->
                <el-dialog title="SKU列表" v-model="detailsDialog">
                    <div style="display: flex;justify-content: end;"><el-button icon="Edit" size="small" @click="updateSpu(spuInfo)" >编辑</el-button></div>
                    
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6">SPU名称</el-col>
                        <el-col :span="18">{{ spuInfo.name }}</el-col>
                    </el-row>
                    <hr>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6">品牌</el-col>
                        <el-col :span="18">{{ spuInfo.description }}</el-col>
                    </el-row>
                    <hr>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6">创建时间</el-col>
                        <el-col :span="18">{{ spuInfo.create_time }}</el-col>
                    </el-row>
                    <hr>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6">SPU描述</el-col>
                        <el-col :span="18">{{ spuInfo.description }}</el-col>
                    </el-row>
                    <hr>
                    <el-row style="margin: 10px 0;">
                        <el-col :span="6">图片列表</el-col>
                        <el-col :span="18">
                            <el-carousel :interval="4000" type="card" indicator-position="outside">
                                <el-carousel-item v-for="item in imageArr" :key="item.id" :label="item.name">
                                    <img :src="item.url" alt="" style="height: 100%;width: 100%;">
                                </el-carousel-item>
                            </el-carousel>
                        </el-col>
                    </el-row>
                </el-dialog>
            </div>
            <!-- 添加修改SPU组件 -->
            <SpuForm v-show="scene==1" @changeScene="changeScene" ref="spu"></SpuForm>

            <!-- 添加修改SKU组件 -->
            <SkuForm v-show="scene==2" @changeScene="changeScene" ref="sku" ></SkuForm>

            <!-- dialog对话框展示已有的sku数据 -->
            <el-dialog title="SKU列表" v-model="show">
                <el-table border :data="skuArr">
                    <el-table-column label="SKU名字" prop="name"></el-table-column>
                    <el-table-column label="SKU价格" prop="price"></el-table-column>
                    <el-table-column label="SKU重量" prop="weight"></el-table-column>
                    <el-table-column label="SKU图片">
                        <template #="{row,$index}">
                            <img :src="row.default_img.url" style="width:100px;height:100px;" alt="">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>

<style scoped lang="scss">
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>